<!--
 * @FileDescription 内容盒子
 * @Author lz
 * @Date 20230314 16:08:00
 * @LastEditors lz
 * @LastEditTime 20230314 16:08:00
-->
<template>
    <div class="con_wp" :class="HomeContent.Default.RelaySequence.value > 79 && state.MenuStatus == 4 || HomeContent.Default.RelaySequence.value > 79 && state.MenuStatus == 1 || HomeContent.Default.RelaySequence.value > 79 && state.MenuStatus == 2? 'new_bg ' : ''"
        v-if="HomeContent.Default.WTIP.value == 'http://localhost:8888'">
        <!-- 上 -->
        <div class="upside_wp">
            <img src="/apoImg/logo.png" class="logo">
            <div class="OperationButton_1">
                Docker Version
            </div>
            <div class="OperationButton_2">
                Co-Driver
            </div>
            <div class="OperationButton_2">
                Mute
            </div>
            <a-select v-model:value="state.region" placeholder="-- setup mode --" class="select_1"
                @change="celeChange(state.setupList[state.region!])">
                <a-select-option :value="index" v-for="(item, index) in state.setupList">{{ item }}</a-select-option>
            </a-select>
            <a-select v-model:value="state.region2" placeholder="--vehicle--" class="select_2"
                @change="celeChange(state.vehicleList[state.region2!])">
                <a-select-option :value="index" v-for="(item, index) in state.vehicleList">{{ item }}</a-select-option>
            </a-select>
            <a-select v-model:value="state.region3" placeholder="-- map --" class="select_3"
                @change="celeChange(state.mapList[state.region3!])">
                <a-select-option :value="index" v-for="(item, index) in state.mapList">{{ item }}</a-select-option>
            </a-select>
            <div class="OperationButton_3">
                Login
            </div>
        </div>
        <!-- 左侧 -->
        <div class="leftHand">
            <div class="ModuleBox" @click="Menu(1, 'Tasks')" :class="state.MenuStatus == 1 ? 'ChickOut' : ''">
                <img src="/apoImg/me_task.png" class="me_task">
                <p>Tasks</p>
            </div>
            <div class="ModuleBox" @click="Menu(2, 'Module Controller')" :class="state.MenuStatus == 2 ? 'ChickOut' : ''">
                <img src="/apoImg/me_modu.png" class="me_modu">
                <p>Module Controller</p>
            </div>
            <div class="ModuleBox" @click="Menu(3, 'Layer Menu')" :class="state.MenuStatus == 3 ? 'ChickOut' : ''">
                <img src="/apoImg/me_layer.png" class="me_layer">
                <p>Layer Menu</p>
            </div>
            <div class="ModuleBox" @click="Menu(4, 'Route Editing')" :class="state.MenuStatus == 4 ? 'ChickOut' : ''">
                <img src="/apoImg/me_route.png" class="me_route">
                <p>Route Editing</p>
            </div>
            <div class="ModuleBox" @click="Menu(5, 'Data Recorder')" :class="state.MenuStatus == 5 ? 'ChickOut' : ''">
                <img src="/apoImg/me_data.png" class="me_data">
                <p>Data Recorder</p>
            </div>
            <div class="ModuleBox" @click="Menu(6, 'Config')" :class="state.MenuStatus == 6 ? 'ChickOut' : ''">
                <img src="/apoImg/me_config.png" class="me_config">
                <p>Config</p>
            </div>
            <div class="defBox">
                <p> Default Routing</p>
            </div>
        </div>
        <!-- 内容区域 -->
        <C1 v-show="state.MenuStatus == 1"></C1>
        <C2 v-show="state.MenuStatus == 2"></C2>
        <C3 v-show="state.MenuStatus == 4"></C3>
        <C4 v-show="state.MenuStatus == 5"></C4>
        <div class="SuspendedLabel"></div>

        <!-- 警告 -->
        <!-- <div class="WarningBox" v-if="state.MenuStatus != 4">
            <img src="/apoImg/sanjiao.png" class="sanjiao">     Localization msg lost
        </div> -->
        <!-- 悬浮数据 -->
        <DataPanel v-if="state.MenuStatus != 4"></DataPanel>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage'
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent'
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref } from 'vue'
import HomeContent from '../../HomeContent'
import C1 from './con1.vue'
import C2 from './con2.vue'
import C3 from './con3.vue'
import C4 from './con4.vue'
import DataPanel from './DataPanel.vue'

const state = reactive({
    region: undefined,
    region2: 1,
    region3: 0,
    MenuStatus: 1,
    setupList: [
        'Camera - Lidar Sensor Calibration',
        'Car Teleop',
        'Console Teleop',
        'Dev Kit Close Loop',
        'Dev Kit Debug',
        'Ipc1 Mkz Close Loop',
        'Ipc1 Mkz Standard Debug',
        'Ipc2 Mkz Close Loop',
        'Ipc2 Mkz Standard Debug',
        'Ipc2 Mkz Sensor Calibration',
        'Map Collection',
        'Mkz 64beam',
        'Mkz Close Loop',
        'Mkz Lgsvl',
        'Mkz Standard Debug',
        'Mkz Standard Debug Hesai',
        'Mkz Standard  Debug Smart Recorder',
        'Navigation',
        'Rtk',
    ],
    vehicleList: [
        '60dev Kit Advanced Ne-5',
        'Dev Kit'
    ],
    mapList: [
        'Apollo Map',
        'Map Name',
        'Map Name.Last',
        'San Mateo',
        'Sunnyvale Big Loop',
        'Sunnyvale Loop',
        'Sunnyvale With Two Offices'
    ]
});


//菜单切换
async function Menu(index: number, name: string) {
    state.MenuStatus = index
    if (index == 1) {
        //进入Tasks
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackClickTasksRequest(true))
    }
    if (index == 2) {
        //进入模块启动界面
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackEnterModuleRequest(name))
    } if (index == 4) {
        //进入路线编辑
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackEnterModuleRequest(name))
    }
}
async function celeChange(item: any) {
    console.log(item);
    //设置RTK模式
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackSetRTKRequest(item))
    console.log(state.region, state.region2, state.region3);
    if (state.region == 4 && state.region2 == 1 && state.region3 == 0) {
        HomeContent.Default.OptionTypeCorrect.value = true
    } else {
        HomeContent.Default.OptionTypeCorrect.value = false
    }
}
</script>

<style scoped>
.con_wp {
    position: absolute;
    right: 0;
    top: 111px;
    width: 1854px;
    background-color: #020D15;
}

.new_bg {
    background: transparent;
}

.upside_wp {
    width: 1853px;
    height: 60px;
    background-color: #000000;
}

.leftHand {
    float: left;
    width: 90px;
    height: 909px;
    background: #1A2225;
}

.logo {
    width: 122px;
    height: 40px;
    margin-left: 19px;
    margin-top: 13px;
    float: left;
}

.ModuleBox {
    width: 90px;
    height: 118px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #9CA1A6;
}

.ModuleBox:hover {
    color: #E5E6E8;
    background: #293236;
}

.me_task {
    width: 41px;
    height: 41px;
    margin-top: 26px;
    margin-bottom: 10px;
}

.me_modu {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.me_layer {
    width: 40px;
    height: 42px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.me_route {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.me_data {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.me_config {
    width: 40px;
    height: 35px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.defBox {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 80px;
    background: #433F40;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    color: #9CA1A6;
    line-height: 20px;
    text-align: center;
    padding-top: 20px;
}

.OperationButton_1 {
    float: left;
    width: 126px;
    height: 38px;
    background: #181818;
    border: 2px solid #2E2B2D;
    margin-top: 12px;
    margin-left: 264px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 36px;
    text-align: center;
}

.OperationButton_2 {
    float: left;
    width: 126px;
    height: 38px;
    background: #181818;
    border: 2px solid #2E2B2D;
    margin-top: 12px;
    margin-left: 9px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 36px;
    text-align: center;
}

.OperationButton_3 {
    float: right;
    width: 126px;
    height: 38px;
    background: #181818;
    border: 2px solid #2E2B2D;
    margin-top: 12px;
    margin-left: 9px;
    margin-right: 7px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 36px;
    text-align: center;
}

.select_1 {
    width: 350px;
    margin-top: 12px;
    height: 38px;
    margin-left: 8px;
}

.select_2 {
    width: 260px;
    margin-top: 12px;
    height: 38px;
    margin-left: 8px;
}

.select_3 {
    width: 274px;
    margin-top: 12px;
    height: 38px;
    margin-left: 8px;
}

:deep().ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    height: 100%;
    border: 2px solid #2E2B2D;
    background-color: #000;
}

:deep().ant-select-single.ant-select-show-arrow .ant-select-selection-item {
    line-height: 34px;
    color: #fff;
    background-color: #000;
}

:deep().ant-select-selection-placeholder {
    line-height: 34px !important;
}

:deep().ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border-color: #2E2B2D;
}

:deep().ant-select-arrow {
    color: #686868;
    line-height: 34px !important;
}

.ChickOut {
    color: #E5E6E8;
    background: #293236;
}

.SuspendedLabel {
    position: absolute;
    right: 0;
    bottom: 170px;
    width: 23px;
    height: 34px;
    background-image: url('/apoImg/right.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.WarningBox {
    text-align: left;
    width: 283px;
    height: 44px;
    background: #1C1423;
    border: 2px solid #CC2F6A;
    position: absolute;
    right: 260px;
    top: 73px;
    font-size: 14px;
    font-weight: 500;
    color: #CC2F6A;
    line-height: 38px;
}

.sanjiao {
    width: 20px;
    height: 20px;
    float: left;
    margin-left: 13px;
    margin-top: 10px;
    margin-right: 10px;
}
</style>